<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <rose></rose>
        <jack></jack>
    </div>
    <script src="./vue.js"></script>
    <script>
        let bus=new Vue();
        let vm=new Vue({
            el:'#app',
            data:{

            },
          components:{
                rose:{
                    template:`<h1>this is rose, jack talk to me:{{msg}}</h1>`,
                    data(){
                        return{
                            msg:''
                        }
                    },
                    created(){
                        bus.$on('tellRose',(data)=>{
                            this.msg=data
                        })
                    }
                },
              jack:{
                    template:`<button @click="fn">this is jack rose is fit</button>`,
                  methods:{
                   fn(){
                       bus.$emit('tellRose','rose,you are red')
                   }
                  }
              }
          }
        })
    </script>
</body>

</html>